{% extends "templates/base.html" %}

{% block title%}Offer A Ride{% endblock %}

{% block javascript %}
<script src="/scripts/scriptaculous/1.8.1/prototype.js" type="text/javascript"></script>
<script src="/scripts/scriptaculous/1.8.1/scriptaculous.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
	// <![CDATA[

	document.observe('dom:loaded', function() {
		// add autocomplete functionaliy to source address field
		new Ajax.Autocompleter('id_source_address', 'id_source_address_choices', '/ajax/location-completer', {
			paramName: 'current_value'
		});

		// add autocomplete functionality to destiination field
		new Ajax.Autocompleter('id_destination_address', 'id_destination_address_choices', '/ajax/location-completer', {
			paramName: 'current_value'
		});

	});

	// ]]>
</script>

{% endblock %}

{% block main %}
	<h2>offer a ride</h2>

	<form method="post">

		{{ ride_form.non_field_errors }}

		<div class="inputgroup">
			<div>
				{{ ride_form.source_address.errors }}
				{{ ride_form.source_address.label_tag }}
				{{ ride_form.source_address }}
			</div>
			<div id="id_source_address_choices" class="address_autocomplete" style="display: none;"></div>

			<div>
				{{ ride_form.destination_address.errors }}
				{{ ride_form.destination_address.label_tag }}
				{{ ride_form.destination_address }}
			</div>
			<div id="id_destination_address_choices" class="address_autocomplete" style="display: none;"></div>
		</div>
		

		<div class="inputgroup">
			<div>
				{{ ride_form.date.errors }}
				{{ ride_form.date.label_tag }}
				{{ ride_form.date }}
			</div>

			<div>
				{{ ride_form.departure_time.errors }}
				{{ ride_form.departure_time.label_tag }}
				{{ ride_form.departure_time }}
			</div>

			<div>
				{{ ride_form.arrival_time.errors }}
				{{ ride_form.arrival_time.label_tag }}
				{{ ride_form.arrival_time }}
			</div>
		</div>

		<div class="inputgroup">
			<div>
				{{ ride_form.number_of_seats.errors }}
				{{ ride_form.number_of_seats.label_tag }}
				{{ ride_form.number_of_seats }}
			</div>

    		<div>
				<strong>{{ ride_form.notes.label }}</strong>
				{{ ride_form.notes }}
			</div>
		</div>

		<p>
			<input type="hidden" name="_do_create_ride" value="True"/>
			<input class="button" type="submit" value="Create"/>
		</p>
	</form>
{% endblock %}
